<template>
  <div class="theme">
    <page-header-wrapper />
    <a-card style="margin-top: 10px" :loading="loading">
      <a-input-search v-model="search.name" placeholder="请输入主题名称" @search="searchTheme" style="width: 260px" />
      <a-input-search v-model="search.author" placeholder="请输入作者名称" @search="searchTheme" style="width: 260px; margin-left: 20px" />
    </a-card>
    <a-card :title="$t('menu.site.theme')" style="margin-top: 20px" :loading="loading">
      <a-upload
        slot="extra"
        name="file"
        :action="`${BASE_URL}/admin/theme/upload_theme`"
        :headers="{
          authorization: token
        }"
        @change="addTheme"
        style="margin-bottom: 10px; cursor: pointer"
      ><a-button type="primary"> <a-icon type="upload" /> 添加主题 </a-button></a-upload>
      <router-link to="theme-edit" target="_blank">
        <a-button type="primary" style="position: absolute;  top: 16px; right: 142px;"> <a-icon type="edit" /> 编辑主题 </a-button>
      </router-link>
      <a-row :gutter="16">
        <a-col :span="6" style="margin-bottom: 10px" v-for="(item, index) in themeList" :key="index">
          <a-card hoverable style="width: 380px" :span="8">
            <img
              slot="cover"
              alt="example"
              :src="item.site_theme_cover"
            />
            <template slot="actions" class="ant-card-actions">
              <a-icon key="setting" type="setting" @click="showEditModal(item)" />
              <a :href="item.site_theme_url" target="_blank">
                <a-icon key="eye" type="eye" />
              </a>
              <a-popconfirm :title="$t('form.basic-form.confirm.delete')" @confirm="() => _deleteTheme(item)">
                <a-icon key="delete" type="delete" />
              </a-popconfirm>
            </template>
            <a-card-meta :title="item.site_theme_name">
              <template slot="description">
                <div>
                  <span>
                    授权许可: {{ item.site_theme_license }}
                  </span>
                  <p style="margin: 0;">
                    作者：{{ item.site_theme_author }}
                  </p>
                  <p style="margin: 0;">
                    绑定域名：{{ item.site_theme_domain }}
                  </p>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
        <empty
          v-if="themeList.length === 0"
          image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
          :image-style="{
            height: '60px',
          }"
        >
          <span slot="description">  <a href="#API">暂无主题</a> </span>
          <a-upload
            name="file"
            :action="`${BASE_URL}/admin/theme/upload_theme`"
            :headers="{
              authorization: token
            }"
            @change="addTheme"
            style="margin-bottom: 10px; cursor: pointer"
          >
            <a-button type="primary"> <a-icon type="upload" /> 添加主题 </a-button>
          </a-upload>
        </empty>
      </a-row>
      <pagination v-if="themeList.length > 0" v-model="page.current" :total="page.total" show-less-items style="margin-top: 20px" />
    </a-card>
    <a-modal v-model="visible" title="绑定域名" ok-text="确认" cancel-text="取消" @ok="saveTheme">
      <a-form-item>
        域名：<span style="font-size: 12px">无需带 http(s)://</span>
        <a-input v-model="theme.site_theme_domain" />
      </a-form-item>
    </a-modal>
  </div>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import {
  Empty,
  Pagination
} from 'ant-design-vue'
import {
  getThemeList,
  deleteTheme,
  bindThemeDomain
} from '@/api/theme'

export default {
  components: {
    PageHeaderWrapper,
    Empty,
    Pagination
  },
  data () {
    return {
      themeList: [],
      BASE_URL: process.env.VUE_APP_API_BASE_URL,
      page: {
        current: 1,
        total: 0
      },
      loading: true,
      search: {
        page: 1,
        author: '',
        name: '',
        license: ''
      },
      theme: [],
      visible: false
    }
  },
  computed: {
    token () {
      return this.$store.getters.token
    }
  },
  mounted () {
    this._getThemeList()
  },
  methods: {
    searchTheme () {
      this.search.page = 1
      this._getThemeList()
    },
    _getThemeList () {
      getThemeList(this.search).then(res => {
        if (res.code === 200) {
          this.page.total = res.count
        }
        this.loading = false
        this.themeList = res.items
      })
    },
    addTheme (info) {
      if (info.file.status === 'done') {
        this.$message.info(info.file.response.msg)
        if (info.file.response.code === 200) this._getThemeList()
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    _deleteTheme (theme) {
      deleteTheme(theme).then(res => {
        this.$message.info(res.msg)
        this._getThemeList()
      })
    },
    showEditModal (theme) {
      this.theme = theme
      this.visible = true
    },
    saveTheme () {
      bindThemeDomain({
        domain: this.theme.site_theme_domain,
        site_theme_id: this.theme.site_theme_id
      }).then(res => {
        this.$message.info(res.msg)
        this.visible = false
      })
    }
  }
}
</script>

<style scoped>
</style>
